<template>
	<view class="content">
		<view class="goodsInfo">
			<image :src="goodsInfo.picture" mode=""></image>
			<view class="right">
				<view class="title">{{ goodsInfo.goodsName }}</view>
				<view class="number">
					购买数量
					<view class="num">×{{ payload.buyCount }}</view>
				</view>
				<view class="price"><text class="moneyIcon">￥</text>{{ goodsInfo.msqGoodsAttrValueList[0].price }}</view>
			</view>
		</view>
		<view class="payBox">
			<view class="title flex">
				<view class="lineText"></view>支付方式
			</view>
			<view class="method" @click="payMethod = 0">
				<view class="left">
					<image src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/jiaruwomen/order_icon1.png"
						mode=""></image>
					微信支付
				</view>
				<image class="icon"
					:src="payMethod == 0 ? 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/jiaruwomen/order_icon4.png' : 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/jiaruwomen/order_icon3.png'"
					mode=""></image>
			</view>
			<view class="method rest" @click="payMethod = 1">
				<view class="left">
					<image src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/jiaruwomen/order_icon2.png"
						mode=""></image>
					余额支付
					<text class="restPrice">当前余额:{{ nowMoney || 0 }}</text>
				</view>
				<image class="icon"
					:src="payMethod == 1 ? 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/jiaruwomen/order_icon4.png' : 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/jiaruwomen/order_icon3.png'"
					mode=""></image>
			</view>
			<view class="goodsPrice">
				商品金额
				<view class="price">
					<text class="pIcon">￥</text>{{ totalPrice }}
				</view>
			</view>
		</view>
		<view class="pageBottom">
			<view class="left">
				<view class="total">合计</view>
				<view class="price">
					<text class="pIcon">¥</text>{{ totalPrice02 }}
				</view>
			</view>
			<button class="btn" @click="callPay" :disabled="isPaying">立即购买</button>
		</view>
		<!-- <p class="money">￥<span style="font-size: 60rpx;">{{totalPrice02}}</span></p>
		<view class="popup-content">
			<p class="title">支付方式</p>
			<view class="payment-option" @click="callPay(0)">
				<view class="icon-container">
					<image src="@/static/homeImg/wx.png" class="icon"></image>
				</view>
				<view class="option-details">
					<view class="option-title">微信支付</view>
					<view class="option-description">使用微信快捷支付</view>
				</view>
			</view>
			<view class="divider"></view>
			<view class="payment-option" @click="callPay(1)">
				<view class="icon-container">
					<image src="@/static/homeImg/yue.png" class="icon"></image>
				</view>
				<view class="option-details">
					<view class="option-title">余额支付</view>
					<view class="option-description">可用余额 <text style="color: #FF5B13;">￥{{nowMoney || 0}}</text>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import {
	getInfo,
	getUserInfo,
	getSilent02
} from '@/api/user.js';
import {
	getUserLevel,
	postCreateOrder
} from '@/api/order.js';
export default {
	data() {
		return {
			totalPrice: '',
			nowMoney: '',
			yhqId: '',
			goodsTypeId: '',
			totalPrice02: '',
			payload: {
				specificationId: '',
				buyCount: ''
			},
			isPaying: false,
			goodsInfo: {},
			payMethod: 0, //0 微信支付  1 余额支付
			userId: '',
			money: '',
			orderNo: '',
			createTime: '',
			orderId: '',
			type: ''
		};
	},
	onLoad(options) {
		this.payload.specificationId = options.specificationId
		this.payload.buyCount = options.buyCount
		this.yhqId = options.yhqId
		this.totalPrice = options.totalPrice
		this.goodsTypeId = options.goodsTypeId;
		this.goodsInfo = JSON.parse(decodeURIComponent(options.goodsInfo))
	},
	onShow() {
		this.isPaying = false
		getUserInfo().then(res => {
			// const userId = res.data.uid;
			// if (userId && localStorage.getItem('getSilent') == 0) {
			// 	getSilent02(this.payload.specificationId, this.payload.buyCount, this.totalPrice, this.yhqId,
			// 		userId).then(res => {
			// 		localStorage.setItem('getSilent', 1)
			// 		if (localStorage.getItem('getSilent') == 1) {
			// 			window.location.replace(res.data);
			// 		}
			// 	})
			// }
		})

		getInfo().then(res => {
			this.nowMoney = res.data.nowMoney
		})

		getUserLevel(this.goodsTypeId).then(res => {
			if (res.data) {
				this.totalPrice02 = (this.totalPrice * (res.data / 100)).toFixed(2);
				// 如果后续还需要用到 totalPrice 进行计算，那么可以将它转回数字类型
			} else {
				this.totalPrice02 = this.totalPrice
			}
		});
	},
	methods: {
		callPay() {
			if (this.isPaying) return;
			this.isPaying = true;
			let that = this;
			postCreateOrder({
				yhqId: this.yhqId,
				payType: this.payMethod,
				tradeType: 0,
				purchaseInformationVos: [this.payload]
			}).then(res => {
				if (that.payMethod === 0) { // 微信支付
					// 检查 WeixinJSBridge 是否可用
					this.isPaying = false // 防止重复点击的标志
					let orderInfo = {
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign
					};
					const payMoney = res.data.msqOrder.payMoney;
					const orderNo = res.data.msqOrder.orderNo;
					const createTime = res.data.msqOrder.createTime;
					const orderId = res.data.msqOrder.id;
					uni.requestPayment({
						...orderInfo,
						success: (res) => {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							});

							this.isPaying = false;
							uni.navigateTo({
								url: '/pages/addOrder/payOk?payMoney=' +
									payMoney +
									'&orderNo=' + orderNo +
									'&createTime=' + createTime +
									'&type=' + that.payMethod +
									'&orderId=' + orderId
							});

						},
						fail: (err) => {
							this.isPaying = false;
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						}
					});
				} else if (that.payMethod === 1) { // 余额支付

					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					this.isPaying = false;
					const payMoney = res.data.msqOrder.payMoney;
					const orderNo = res.data.msqOrder.orderNo;
					const createTime = res.data.msqOrder.createTime;
					const orderId = res.data.msqOrder.id;
					uni.navigateTo({
						url: '/pages/addOrder/payOk?payMoney=' + payMoney + '&orderNo=' + orderNo +
							'&createTime=' + createTime + '&type=' + that.payMethod + '&orderId=' +
							orderId
					});
				}

			}).catch(err => {
				uni.showToast({
					title: '支付失败',
					icon: 'none'
				});
				console.log(err);
				this.isPaying = false; // 在发生错误时也应重置状态
			});
		}
	}
}
</script>
<style lang="scss" scoped>
.content {}

.money {
	width: 100%;
	font-weight: bold;
	font-size: 54rpx;
	color: #DB3A26;
	text-align: center;
	margin: 80rpx 0rpx;
}

.popup-content {
	background-color: #fff;
	width: 680rpx;
	border-radius: 8rpx;
	padding: 34rpx;
	margin: 0rpx 34rpx;

	.title {
		margin-bottom: 30rpx;
		color: #999;
	}
}

.payment-option {
	display: flex;
	border-bottom: 2rpx solid #E0E0E0;
	padding: 20rpx 0rpx;

	.icon-container {
		flex: 0 0 auto;
		margin-right: 20rpx;

		.icon {
			width: 48rpx;
			height: 48rpx;
			margin-top: 20rpx;
		}
	}

	.option-details {
		flex: 1 1 auto;

		.option-title {
			font-size: 32rpx;
			margin-bottom: 5rpx;
		}

		.option-description {
			font-size: 28rpx;
			color: #999999;
		}
	}
}

.goodsInfo {
	margin: 24rpx 0;
	padding: 24rpx 32rpx;
	background: #FFFFFF;
	box-shadow: 0px 6px 12px 0px rgba(204, 204, 204, 0.1569);
	border-radius: 12rpx;
	display: flex;
	align-items: center;

	image {
		width: 214rpx;
		height: 214rpx;
		border-radius: 8rpx;
	}

	.right {
		flex: 1;
		margin-left: 24rpx;

		.title {
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 700;
			font-size: 28rpx;
			color: #28314C;
		}

		.number {
			margin: 56rpx 0 0rpx;
			font-size: 24rpx;
			color: #D2D2D2;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num {
				font-family: 'DIN';
				font-weight: 700;
				font-size: 40rpx;
				color: #28314C;
			}
		}

		.price {
			font-family: 'DIN';
			font-weight: 700;
			font-size: 60rpx;
			color: #F9423A;
			padding-top: 10rpx;
		}
	}
}

.moneyIcon {
	color: #F9423A;
	font-size: 32rpx;
	font-weight: 700;
	font-family: 'DIN';
}

.payBox {
	padding: 24rpx 32rpx;
	background: #FFFFFF;
	box-shadow: 0px 6px 12px 0px rgba(204, 204, 204, 0.1569);
	border-radius: 12rpx;

	.title {
		font-weight: 700;
		font-size: 32rpx;
		color: #28314C;
		padding-bottom: 24rpx;
		font-family: "Alibaba PuHuiTi 2.0-85 Bold";
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.0784);
	}

	.lineText {
		width: 8rpx;
		height: 34rpx;
		background: #2393FF;
		border-radius: 8rpx;
		margin-right: 12rpx;
	}

	.rest {
		margin: 0;
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.0784);
	}

	.method {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #28314C;
		margin: 40rpx 0 24rpx;

		.left {
			display: flex;
			align-items: center;

			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 24rpx;
			}

			.restPrice {
				background: rgba(255, 70, 100, 0.2392);
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #FF5144;
				padding: 6rpx 18rpx;
				margin-left: 22rpx;
			}
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.goodsPrice {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #28314C;

		.price {
			font-family: 'DIN';
			font-weight: 700;
			font-size: 40rpx;
			color: #28314C;

			.pIcon {
				font-family: 'DIN';
				font-weight: 700;
				font-size: 24rpx;
				color: #28314C;
			}
		}
	}
}

.pageBottom {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 20rpx 32rpx 50rpx;
	background: #FFFFFF;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		color: #D2D2D2;

		.total {
			margin-bottom: 10rpx;
			margin-right: 10rpx;
		}

		.price {
			font-family: 'DIN';
			font-weight: 700;
			font-size: 60rpx;
			color: #FF4040;

			.pIcon {
				font-size: 24rpx;
			}
		}

	}

	.btn {
		width: 284rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		background: #0077FF;
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
}
</style>